<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>积分管理</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/iCheck/custom.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<style type="text/css">
body{font-size: 14px;padding-top: 8px;}
#list_store{padding: 0;margin: 0;}
#list_store>li{list-style-type: none;float: left;margin: 0 24px 12px 0;}
.panel-body div.row{margin-bottom: 10px;}
#integralExpiredSet{margin: 0;padding: 0;}
#integralExpiredSet>li{list-style-type: none;margin-bottom: 10px;}
</style>
</head>
<body class="gray-bg">
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-12">
			<div class="tabs-container">
			    <ul class="nav nav-tabs">
			        <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">基础规则</a>
			        </li>
			        <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">自定义规则</a>
			        </li>
			    </ul>
			    <div class="tab-content">
			        <div id="tab-1" class="tab-pane active">
			            <div class="panel-body">
			            	<div class="row">
								<div class="col-sm-1">
									店铺选择：
								</div>
								<div class="col-sm-9">
									<ul id="list_store"></ul>
								</div>
								<div class="col-sm-2 text-right">
									已选择：<span id="storeSelectedCount">0</span>个&nbsp;
									<a id="storeMore" data-toggle="modal" data-target="#myModal" style="display: none;">更多</a>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-1">
									积分规则：
								</div>
								<div class="col-sm-11">
									每消费<input id="cost" class="form-control" style="display: inline-block;width: 80px;">元，
									获得<input id="gain" class="form-control" style="display: inline-block;width: 80px;">积分
								</div>
							</div>
							<div class="row">
								<div class="col-sm-2" style="width: 128px;">
									积分过期设置：
								</div>
								<div class="col-sm-10">
									<ul id="integralExpiredSet">
										<li>
											<input name="expired_type" value="1" type="radio">不设置积分过期
										</li>
										<li>
											<input name="expired_type" value="2" type="radio">
											每年
											<select class="form-control month" onchange="func_getDay()" style="display: inline-block;width: 80px;"></select>月
											<select class="form-control day" style="display: inline-block;width: 80px;"></select>日，清零前一年1月1日的积分
										</li>
										<li>
											<input name="expired_type" value="3" type="radio">
											超过
											<select class="form-control month" style="display: inline-block;width: 80px;"></select>个月没有使用的积分清零
										</li>
									</ul>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-12 text-center">
									<button onclick="func_updateHide()" class="btn btn-primary" type="button">修改</button>
									<button onclick="func_save()" class="btn btn-primary" type="button">保存</button>
								</div>
							</div>
			            </div>
			        </div>
			        <div id="tab-2" class="tab-pane">
			            <div class="panel-body">
			            	
			            </div>
			        </div>
			    </div>
			</div>
		</div>
	</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">选择门店</h4>
            </div>
            <div class="modal-body">
            	<div class="row">
	            	<div class="col-sm-1">
	            		<button onclick="func_checkAll(this)" type="button" class="btn btn-primary">全选</button>
	            	</div>
	            	<div class="col-sm-11">
	            		<div class="input-group">
				            <input id="keyword" placeholder="输入名称搜索" type="text" class="form-control"> <span class="input-group-btn"> 
				            <button onclick="func_searchStore()" type="button" class="btn btn-primary">搜索</button> </span>
				        </div>
	            	</div>
            	</div>
            	<div id="storeMoreList">
					<table style="width: 100%;border-collapse: separate;border-spacing:12px;">
					
					</table>
				</div>
            </div>
<!--             <div class="modal-footer"> -->
<!--                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> -->
<!--                 <button type="button" class="btn btn-primary">确定</button> -->
<!--             </div> -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div id="update" style="position:absolute;z-index:4444;left:0;top:0;height:100%;width:100%;background-color:black;opacity:0.1"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var integralRuleId = 0;
var otherStore = [];	//除去页面展示的5个之外的其他门店

$(function(){
	init();
	
	$(document).on('ifChanged',':checkbox', function(e){
		$("#storeSelectedCount").text($(":checkbox:checked").length);
	});
});

function init(){
	$(":radio").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	
	func_getMonth();
    func_getDay();
    
  	//获取门店
	$.ajax({
		async: false,
		type: "post",
		dataType:"json",
		url:path+"/scan/member/listStore",
		success: function(data){
			if(data.msg_code == 1){
				var list_store = "";
	    		$.each(data.data,function(i,d){
	    			list_store += '<li><input value="'+d.id+'" type="checkbox">'+d.name+"</li>";
	    			if(i==4){
	    				return false;
	    			}
	    		});
	    		
	    		if(data.data.length > 4){
	    			$("#storeMore").show();
	    			$.each(data.data,function(i,d){
	    				if(i>4){
		    				var json = {};
		    				json.id = d.id;
		    				json.name = d.name;
		    				otherStore.push(json);
	    				}
		    		});
	    			func_otherStore();
	    		}else{
	    			$("#storeMore").hide();
	    		}
	    		$("#list_store").html(list_store);
	    		$(":checkbox").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	    		func_updateShow();
			}
		}
	});
	
	$.post(path + "/scan/integral/getIntegralRule",function(data){
		if(data.msg_code == 1){
			if(data.data!='null' && data.data!=null){
				var integralRule = data.data;
				integralRuleId = integralRule.id;
				
				$.each(integralRule.store_ids.split(","),function(i,d){
					$("#list_store :checkbox[value='"+d+"']").attr("checked",true);
				});
				$("#cost").val(integralRule.cost / 100);
				$("#gain").val(integralRule.gain);
				$(":radio[name='expired_type'][value='"+integralRule.expired_type+"']").attr("checked",true);
				if(integralRule.expired_type == 2){
					$(".month:first").val(integralRule.expired_time1.split("-")[0]);
					$(".day").val(integralRule.expired_time1.split("-")[1]);
				}else if(integralRule.expired_type == 3){
					$(".month:last").val(integralRule.expired_time2);
				}
				
				$(":checkbox").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
				$(":radio").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
				$("#storeSelectedCount").text($(":checkbox:checked").length);
			}
		}
	},"json");
}

function func_otherStore(list){
	$("#storeMoreList>table").html("");
	if(list == undefined){
		list = otherStore;
	}
	$.each(list,function(i,d){
		if(i%5 == 0){
			$("#storeMoreList>table").append("<tr class='parentTr'></tr>");
		}
	//		$("#storeMoreList>table tr.parentTr:last").append('<td><input value="'+d.id+'" type="checkbox"><marquee>'+d.name+'</marquee></td>');
		$("#storeMoreList>table tr.parentTr:last").append('<td><table style="width:100%"><tr><td><input value="'+d.id+'" type="checkbox"></td><td><marquee>'+d.name+'</marquee></td></tr></table></td>');
	});
	$(":checkbox").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green"});
}

function func_checkAll(that){
	if($("#storeMoreList :checkbox").length == 0){
		return ;
	}
	if($(that).text() == "全选"){
		$(that).text("反选");
		$("#storeMoreList :checkbox").iCheck('check');
	}else if($(that).text() == "反选"){
		$(that).text("全选");
		$("#storeMoreList :checkbox").iCheck('uncheck');
	}
	$("#storeSelectedCount").text($(":checkbox:checked").length);
}

function func_searchStore(){
	var keyword = $.trim($("#keyword").val());
	var temp = [];
	if(keyword != ""){
		$.each(otherStore,function(i,d){
			if(d.name.indexOf(keyword)>=0){
				temp.push(d);
			}
		});
	}else{
		temp = otherStore;
	}
	func_otherStore(temp);
}

function func_getMonth() {
    var option = "";
    for (var i = 1; i <= 12; i++) {
        option += '<option value="' + i + '">' + i + '</option>';
    }
    $(".month").html(option);
}

function func_getDay() {
    var year = 1900;
    var month = $(".month:first").val();;

    var now = new Date();
    now.setFullYear(year);
    now.setDate(1);
    now.setMonth(month);
    now.setDate(0);
    var lastDay = now.getDate();

    var option = "";
    for (var i = 1; i <= lastDay; i++) {
        option += '<option value="' + i + '">' + i + '</option>';
    }
    $(".day").html(option);
}

function func_save(){
	if($("#update:visible").length > 0){
		return ;
	}
	if($(":checkbox:checked").length == 0){
		alert("请勾选门店信息");
		return ;
	}
	if($.trim($("#cost").val()) == "" || $.trim($("#gain").val()) == ""){
		alert("请填写积分规则");
		return ;
	}
	if($(":radio[name='expired_type']:checked").length == 0){
		alert("请设置积分过期规则");
		return ;
	}
	
	var json = {};
	if(integralRuleId != 0){
		json.id = integralRuleId;
	}
	
	var store_ids = "";
	$(":checkbox:checked").each(function(i,d){
		store_ids += "," + $(d).val();
	});
	store_ids = store_ids.substr(1);
	
	var expired_type = $(":radio[name='expired_type']:checked").val();
	var expired_time1 = "";
	var expired_time2 = "";
	if(expired_type == 2){
		expired_time1 = $(".month:first").val() + "-" + $(".day").val();
		json.expired_time1 = expired_time1;
	}else if(expired_type == 3){
		expired_time2 = $(".month:last").val();
		json.expired_time2 = expired_time2;
	}
	
	json.store_ids = store_ids;
	json.cost = $.trim($("#cost").val());
	json.gain = $.trim($("#gain").val());
	json.expired_type = expired_type;
	
	$.ajax({
		contentType: 'text/plain;charset=utf-8',
		type: "post",
		dataType:"json",
		url:path+"/scan/integral/saveIntegralRule",
		data: JSON.stringify(json),
		success: function(data){
			if(data.msg_code == 1){
				alert("保存成功");
				func_updateShow();
			}
		}
	});
}

function func_updateShow(){
	var container = $(".container-fluid").height();
	$("#update").height(container-60);
	$("#update").show();
}

function func_updateHide(){
	$("#update").hide();
}
</script>
</html>